<template>
    <div class="container">
        <van-nav-bar
                title="收件人"
                right-text="确定"
                left-arrow
                @click-left="$router.goBack()"
                @click-right="onClickRight"
        ></van-nav-bar>

        <input class="input" v-model="name" placeholder="请输入姓名如：张三"/>
        <input class="input" v-model="phone" type="tel" maxlength="11" placeholder="请输入联系电话"/>

    </div>
</template>

<script>
    export default {
        name: "AddContact",
        data() {
            return {
                phone: "",
                name: ""
            }
        },
        beforeRouteEnter(to, from, next) {
          next(vm=>{
              vm.phone = '';
              vm.name = '';
          })
        },
        methods: {
            onClickRight() {
                if (this.phone && this.name) {
                    window.eventBus.$emit('onContactChoose', this.name, this.phone);
                    this.$router.goBack();
                } else {
                    this.$toast("请输入联系方式")
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        display: flex;
        flex-direction: column;

    }

    .input {
        background: #f2f2f2;
        border: solid 1px #e0e0e0;
        height: 40px;
        flex-shrink: 0;
        margin: 0 16px;
        margin-top: 16px;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 14px;
    }
</style>